import React, { useEffect, useState } from 'react';
import './Studentcj.scss'
import { Button, Checkbox, Modal, Select, Table ,Form, Input} from 'antd';
import service from '../../../api/index';
import { log } from 'console';
import form from 'antd/es/form';
import { useNavigate } from 'react-router';

const Studentcj = () => {
    //跳转新增
     let navigate = useNavigate()
     let handleadd = ()=>{
        navigate('/index/studentcjadd')
     }
    let[dataSource1,setdataSource1]= useState()
     //发请求初次渲染数据
    useEffect(()=>{
        studentlist()
    },[])
    var studentlist = async ()=>{
       var res = await service.mystudent.studentcj()
       console.log('查看学生成绩',res.data);
       setdataSource1(res.data)
       
    }
    //点击多选框状态变
    let [bool,setbool]=useState(false)
    let [id,setid] = useState()
    let onChange = (id:any)=>{
       setbool(true)
       setid(id)
    }
     //删除数据
     let del = async ()=>{
      if(bool==true){
        let res = await service.mystudent.delcj({id})
        studentlist()
      }
     }
     //查询
    let handleChange = ()=>{

    }
    //编辑
    const [isModalOpen, setIsModalOpen] = useState(false);
       //获取表单引用
    const [form] = Form.useForm();
    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    let handleexit = (record:any)=>{
        setIsModalOpen(true);
        form.setFieldsValue(record)
    }
    let onFinish = async (values:any)=>{
        console.log('表单数据',values);
        let res = await service.mystudent.exitcj(values)
        studentlist()
        setIsModalOpen(false);

    }
    //表格数据
     const columns1 = [
        {
          title: '名字',
          dataIndex: 'name',
          key: 'name',
          render: (a:any,record:any,index:any) => <div className='admin11'><Checkbox onChange={()=>{onChange(record.id)}}>{record.name}</Checkbox></div>,
        },
        {
          title: '班级',
          dataIndex: 'banji',
          key: 'banji',
        },
        {
          title: '语文成绩',
          dataIndex: 'yuwen',
          key: 'yuwen',
        },
        {
            title: '英语成绩',
            dataIndex: 'yingyu',
            key: 'yingyu',
        },
        {
            title: '物理成绩',
            dataIndex: 'wuli',
            key: 'wuli',
          },
          {
            title: '化学成绩',
            dataIndex: 'huaxue',
            key: 'huaxue',
          },
          {
            title: '发布日期',
            dataIndex: 'fabu',
            key: 'fabu',
          },
          {
              title: '状态',
              dataIndex: 'zhuangtai',
              key: 'zhuangtai',
          },
          {
            title: '操作',
            dataIndex: 'caozuo',
            key: 'caozuo',
            render: (a:any,record:any,index:any) => <div className='admin11' onClick={()=>{handleexit(record)}}>{record.caozuo}</div>,
          },
        
      
      ];
   

    return (
        <div className='cjgl'>
            <div className="cjgl-bx">
            <div className="top">
                <p>成绩管理</p>
                <p>首页 &gt; 成绩管理</p>
            </div>
            <div className="center">
            <Button type="primary" style={{margin:10}} onClick={del}>删除选择</Button>
            <Button type="primary" style={{margin:10,marginLeft:0}} className='shuaxin'>刷新</Button>
            <Select
                defaultValue="全部"
                style={{ width: 200 }}
                onChange={()=>{handleChange()}}
                options={[
                    { value: '全部', label: '全部' },
                    { value: '已审核', label: '已审核' },
                    { value: '待审核', label: '待审核' },
                    { value: '已作废', label: '已作废' },
                ]}
            />
            <Button type="primary" style={{margin:10,marginLeft:750}} className='daochu'>导出</Button>
            <Button type="primary" style={{margin:10,marginLeft:0}} className='add' onClick={handleadd}>新增</Button>
            </div>
            <div className="bottom">
            <Table dataSource={dataSource1} columns={columns1}  />
            </div>
            {/* 弹框 */}
            <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
            <Form
                form={form}
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 20 }}
                onFinish={onFinish}
                // onFinishFailed={onFinishFailed}
                autoComplete="off"
                >
                <Form.Item
                    label="id"
                    name="id"
                    hidden
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="姓名"
                    name="name"
                    rules={[{ required: true, message: '请输入姓名' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="班级"
                    name="banji"
                    rules={[{ required: true, message: '请输入年龄' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="语文成绩"
                    name="yuwen"
                    rules={[{ required: true, message: '请输入地址' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="英语成绩"
                    name="yingyu"
                    rules={[{ required: true, message: '请输入地址' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="物理成绩"
                    name="wuli"
                    rules={[{ required: true, message: '请输入地址' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="化学成绩"
                    name="huaxue"
                    rules={[{ required: true, message: '请输入地址' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
                    <Button type="primary" htmlType="submit">
                    编辑
                    </Button>
                </Form.Item>
          </Form>
            </Modal>
            </div>
            
        </div>
    );
};

export default Studentcj;